<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>打印损溢单</title>
    <script src="/jquery-1.8.3.min.js"></script>
    <script src="/printThis.js"></script>
    <script src="/chineseMoney.js"></script>
    <script src="/tools.js"></script>
    <link rel="stylesheet" href="/print.css"/>
</head>
<body>
<div id="receiptPrintArea0">
    <h3 style="text-align: center">净菜加工单</h3>
    <br/>
    <table width="100%">
        <tr>
            <td width="15%">单号：</td><td width="15%"><span class="id"></span></td>
            <td width="15%">日期：</td><td width="15%"><span class="stockDate"></span></td>
            <td width="10%">产线：</td><td width="30%"><span class="productionLineName"></span></td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td width="25%">制单人：</td><td width="25%"><span class="operationPersonName"></span></td>
            <td width="25%">备注：</td><td width="25%"><span class="remark"></span></td>
        </tr>
    </table>
    <br/>
    <table style="width: 100%;" class="printTable">
        <thead style="border: 1px solid">
        <td width="20%">净菜</td>
        <td width="10%">净数量</td>
        <td width="10%">规格</td>
        <td width="10%">品牌</td>
        <td width="10%">单位</td>
        <td width="20%">毛菜</td>
        <td width="10%">毛数量</td>
        <td width="10%">转化率%</td>
        </thead>
        <tbody class="content">
        </tbody>
    </table>
</div>
<script th:inline="javascript">
    var params = [[${params}]];
    var billIds = params.billIds;
    var backAddress = params.backAddress;
    for (var i = 1 ; i < billIds.length ; i++) {
        var node = $("#receiptPrintArea0").clone(true);
        node.attr("id","receiptPrintArea" + i);
        $('body').append(node);
    }
    function print(no) {
        $("#receiptPrintArea" + no).printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            pageTitle: "",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
        });
    }
    $.ajax({
            url: backAddress + "/api/stock/printProcessBillData",
            contentType: "application/json;charset=utf-8",
            data : JSON.stringify({
                "backAddress" : backAddress,
                "billIds" : billIds
            }),
            type: "post",
            dataType: "json",
            success: function (data) {
                //console.log(data)
                for (var k = 0 ; k < data.data.length ; k++){
                    $(".id")[k].innerText = data.data[k].id;
                    $(".stockDate")[k].innerText = data.data[k].stockDate;
                    $(".operationPersonName")[k].innerText = data.data[k].operationPersonName;
                    $(".remark")[k].innerText = data.data[k].remark;
                    $(".productionLineName")[k].innerText = data.data[k].productionLineName;
                    var str = '' ;
                    for (var i = 0 ; i < data.data[k].detail.length ; i++) {
                        str += "<tr><td width=\"20%\">" + data.data[k].detail[i].processName + "</td>" +
                            "<td width=\"10%\">" + data.data[k].detail[i].processAmount + "</td>" +
                            "<td width=\"10%\">" + dealNull(data.data[k].detail[i].specs) + "</td>" +
                            "<td width=\"10%\">" + dealNull(data.data[k].detail[i].brand) + "</td>" +
                            "<td width=\"10%\">" + dealNull(data.data[k].detail[i].unitName) + "</td>" +
                            "<td width=\"20%\">" + data.data[k].detail[i].originalName + "</td>" +
                            "<td width=\"10%\">" + data.data[k].detail[i].originalAmount + "</td>" +
                            "<td width=\"10%\">" + data.data[k].detail[i].originalProcessRate + "</td></tr>" ;
                    }
                    $(".content")[k].innerHTML = str;
                    print(k)
                }
            },
            error: function (status) {
                alert(status)
            }
        }
    )
</script>
</body>
</html>